<template>
	<div class="banner" @click="handleClick">
		<img class="banner-img" src="//img1.qunarzz.com/sight/p0/1412/4b/632fe62f622b9b112cdf9f3b80ce8f78.water.jpg_600x330_ff9705d1.jpg" alt="" />
		<div class="banner-info">
			<p class="banner-title">深圳欢乐谷（AAAA景区）</p>
			<span class="banner-number">23</span>
		</div>
		<gallery :imgs="imgs" v-show="isShow" @close="galleryClose"></gallery>
	</div>
</template>

<script>
	import gallery from 'common/gallery/gallery'
	export default{
		name:'DetailBanner',
		data(){
			return{
				imgs:[
					'http://img1.qunarzz.com/sight/p0/1606/11/11be546bf06d4f67b4.water.jpg_350x240_93cb4959.jpg',
					'http://img1.qunarzz.com/sight/p0/1604/e0/e074ca39741daad890.water.jpg_350x240_c4346207.jpg'
				],
				isShow:false
			}
		},
		components:{
			gallery
		},
		methods:{
			handleClick(){
				this.isShow = true
			},
			galleryClose(){
				const a = 111222
				this.isShow = false
				console.log(a)
			}
		}

	}
</script>

<style lang="stylus"  scoped>
	.banner
		position:relative
		overflow:hidden
		height:0
		padding-bottom:55%
		.banner-img
			width:100%
		.banner-info
			display:flex
			position:absolute
			bottom:0
			left:0
			right:0	
			line-height:.5rem
			font-size:.32rem
			color:#fff
			background:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
			.banner-title
				flex:1
				padding:0 .2rem
			.banner-number
				padding:0 .2rem
</style>